import { Component } from 'react'
import { View, Text, Image, Button } from '@tarojs/components'
import { AtBadge, AtButton } from 'taro-ui'
import cls from 'classnames'
import { inject, observer } from 'mobx-react';
import { AtIcon, AtList, AtListItem } from 'taro-ui'
import IconFont from '../../components/iconfont';
import Taro from '@tarojs/taro'
import './index.less'

@inject('store')
@observer
export default class Index extends Component {
  state = {
    basicInfo: null,
    accountRequirement: null
  }

  componentWillMount () { }

  componentDidMount () { 
  }

  componentWillUnmount () {
   }

  componentDidShow () {
    this.getAccountBaseInfo();
    this.getAccountRequirement();
  }

  componentDidHide () {
  }

  getAccountBaseInfo = async () => {
    const { id } = this.props.store.userInfo
    // TODO 获取用户详情信息
		const { success, data, msg } = await Taro.request({
			method: 'get',
			url: '/api/account/basic/info/detail',
			data: {
        accountId: id
      }
		})
    if (success) {
      this.setState({
        basicInfo: data
      })
    }
  }

  getAccountRequirement = async () => {
    const { id } = this.props.store.userInfo
    // TODO 获取用户择偶要求
		const { success, data, msg } = await Taro.request({
			method: 'get',
			url: '/api/account/requirement/detail',
			data: {
        accountId: id
      }
		})
    if (success) {
      this.setState({
        accountRequirement: data
      })
    }
  }

  linkToAccountDetail = () => {
    const { id } = this.props.store.userInfo
    const { basicInfo, accountRequirement } = this.state
    console.log(basicInfo, accountRequirement, 2222)
    if (!basicInfo || !accountRequirement) {
      Taro.navigateTo({
        url: `/pages/personalSituation/index`,
      })
    } else {
      Taro.navigateTo({
        url: `/pages/accountDetail/index?id=${id}`,
      })
    }
  }

  linkToSeeMe = () => {
    Taro.navigateTo({
      url: `/pages/seeMe/index`,
    })
  }

  linkToSuggest = () => {
    Taro.navigateTo({
      url: `/pages/suggest/index`,
    })
  }

  linkToCertification = () => {
    Taro.navigateTo({
      url: `/pages/certification/index`,
    })
  }

  handleAuth = () => {
    const { id } = this.props.store.userInfo
    Taro.getUserProfile({
      desc: "测试",
      success: async (res) => {
        const { success, data } = await Taro.request({
          method: 'post',
          url: '/api/account/update',
          data: {
            id,
            ...res.userInfo
          }
        })

        if (success) {
          this.props.store.setUserInfo(data)
        }
      },
      fail: (e) => {
        console.log('fail:', e)
      }
    })
  }

  render () {
    const { avatarUrl, nickName } = this.props.store.userInfo
    const loading = this.props.store.loading
    if (loading) {
      return null
    }

    if (!nickName) {
      return (
        <View className='my-page'>
          <View className='wx-login-btn' onClick={this.handleAuth}>微信登录</View>
        </View>
      )
    }

    return (
      <View className='my-page'>
        <View className='my-page-header'>
          <Image className='avatar' src={avatarUrl} />
          <View className='info'>
            <View className='info-name'>
              {nickName}
            </View>
            {/* <View className={cls('info-vip', {
              gold: true
            })}>
              <IconFont name='huiyuan' size={32} color={true ? '#FFF' : 'red'} />
              &nbsp;会员
            </View> */}
          </View>
          <View className='right-btn' >
            <AtBadge dot>
              <AtButton onClick={this.linkToAccountDetail}>
                资料卡
              <AtIcon value='chevron-right' size='18'/>
              </AtButton>
            </AtBadge>
          </View>
        </View>
        <View className='my-page-list'>
          <AtList>
            {/* <AtListItem title='我的认证' arrow='right' onClick={this.linkToCertification} /> */}
            <AtListItem title='最近来访' arrow='right' onClick={this.linkToSeeMe} /> 
            {/* <AtListItem title='我的收藏' arrow='right' />
            <AtListItem title='收到的微信申请' arrow='right' />
            <AtListItem title='发出的微信申请' arrow='right' /> */}
            <AtListItem title='意见反馈' arrow='right' onClick={this.linkToSuggest} />
          </AtList>
        </View>
        
        <View className='contact-btn'>
          <Button size='mini' openType='contact' type='primary'>联系客服</Button>
        </View>

        {/* <View>
          信息认证卡片 如果已经认证 则可以点亮
          <View>实名认证  省份证号 姓名</View>
          <View>工作认证</View>
          <View>学历认证</View>
          <View>收入认证</View>
          <View>房产认证</View>
          <View>车辆认证</View>
        </View>
*/}
      </View>
    )
  }
}